<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 开启 IE8 标准渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/animate.css">
</head>

<body>
    <!-- 
        navbar——设置nav元素为导航条组件；

        .navbar-default——指定导航条组件为默认主题；

        .navbar-inverse——指定导航条组件为黑色主题；

        .navbar-fixed-top——设置导航条组件固定在顶部；

        .navbar-fixed-bottom——设置导航条组件固定在底部；

        .container-fluid——设置宽度充满父元素，即为100%；

        .navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

        .navbar-toggle——设置button元素为导航条组件的切换钮；

        .collapsed——设置button元素为在视口小于768px时才显示；

        .navbar-brand——设置导航条组件内的品牌图标；
        
     -->
    <!-- 导航 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- 小屏幕导航按钮和logo -->
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">小棕熊QVQ</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </div>
            <!-- 大屏幕导航 -->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#forum">论坛</a></li>
                    <li><a href="#html5">前端开发</a></li>
                    <li><a href="#course">最新课程</a></li>
                    <li><a href="#app">移动APP</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- home -->
    <section id="home">
        <div class="filter">
            <div class="container">
                <div class="row wow fadeInUp" data-wow-duration="2s">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <h2>bootstrap 实战课程等你来战！</h2>
                        <p>本套课程适用于：1.WEB开发人员：2.网站维护人员、管理人员
                            <br/>培训技能目标：使用bootstrap框架快速搭建响应式网页，颠覆传统WEB前端！
                        </p>
                        <img src="/images/php.jpg" alt="php" class="img-responsive">
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- forum -->
    <section id="forum">
        <div class="container">
            <div class="row  wow fadeInUp" data-wow-duration=".5s">
                <div class="col-md-4 col-xs-4">
                    <a href="#">
                        <img src="./images/forum1.png" alt="forum1.png" class="img-responsive">
                        <h3>Android开发</h3>
                        <p>Android开发技术交流、问题求助、实战案例分享</p>
                    </a>
                </div>
                <div class="col-md-4 col-xs-4">
                    <a href="#">
                        <img src="./images/forum2.png" alt="forum2.png" class="img-responsive">
                        <h3>IOS开发</h3>
                        <p>iOS开发技术交流，海量iOS实战干活分享</p>
                    </a>
                </div>
                <div class="col-md-4 col-xs-4">
                    <a href="#">
                        <img src="./images/forum3.png" alt="forum3.png" class="img-responsive">
                        <h3>嵌入式底层开发</h3>
                        <p>底层嵌入开发、实战案例等技术交流讨论</p>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- HTML5 -->
    <section id="html5">
        <div class="container">
            <div class="row wow fadeInLeft">
                <div class="col-md-6">
                    <h3>HTML5前端开发</h3>
                    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p><i class="glyphicon glyphicon-grain icon"></i>使用HTML5与CSS3技术轻松显示设备自适应展示。</p>
                    <p><i class="glyphicon glyphicon-grain icon"></i>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
                </div>
                <div class="col-md-6">
                    <img src="./images/html5.jpg" alt="html5" class="img-responsive">
                </div>
            </div>
        </div>
    </section>
    <!-- Bootstrap -->
    <section id="bootstrap">
        <div class="container">
            <div class="row wow fadeInUp">
                <div class="col-md-6">
                    <img src="./images/Bootstrap.jpg" alt="Bootstrap" class="img-responsive">
                </div>
                <div class="col-md-6">
                    <h3>bootstrap实战视频教程</h3>
                    <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <p><i class="glyphicon glyphicon-grain icon"></i>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备</p>
                    <p><i class="glyphicon glyphicon-grain icon"></i>Bootstrap 提供了全面、美观的文档。你能再这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
                </div>
            </div>
        </div>
    </section>
    <!-- course  -->
    <section id="course">
        <div class="container">
            <div class="row wow fadeIn" data-wow-delay=".5s">
                <div class="col-md-12">
                    <h2 class="title">最新课程</h2>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <div class="col-md-3  col-xs-6">
                    <div class="cour-ccont">
                        <img src="images/course.jpg" alt="course" class="img-responsive">
                        <a href="#" class="btn btn-primary " target="_blank" role="button">加入学习</a>
                    </div>
                </div>
                <ul class="pagination page">
                    <li><a href="#">«</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">»</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- app -->
    <section id="app">
        <div class="container">
            <div class="row wow fadeInUp">
                <div class="col-md-6">
                    <h3 class="title">小棕熊QVQ移动APP下载</h3>
                    <p class="content">全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                    <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-save icon"></i> iPhone版</a>
                    <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-save icon"></i> Android版</a>
                </div>
                <div class="col-md-6">
                    <img src="images/app-banner.jpg" alt="" class="img-responsive">
                </div>
            </div>
        </div>
    </section>
    <!-- contact -->
    <section id="contact">
        <div class="contact-bj">
            <div class="container">
                <div class="row">
                    <div class="col-md-6  col-xs-6  wow fadeInLeft">
                        <h2 class="title">
                            <span class="glyphicon glyphicon-send"></span> &nbsp; 联系小麦
                        </h2>
                        <p>
                            小粽熊QVQ是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
                        </p>
                        <address>
                            <p>
                                <span class="glyphicon glyphicon-home"></span>
                                &nbsp;
                                地址:成都市高新区天府软件园D5-11
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-phone-alt"></span>
                                &nbsp;
                                联系电话：028-86567913
                            </p>
                            <p>
                                <span class="glyphicon glyphicon-envelope"></span>
                                &nbsp;
                                邮箱:hr@maiziedu.com
                            </p>
                        </address>
                    </div>
                    <div class="col-md-6 col-xs-6  wow fadeInRight">
                        <form action="#" method="post">
                            <div class="col-md-6">
                                <input type="text" class="form-control" placeholder="您的姓名" />
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="您的邮箱" />
                            </div>
                            <div class="col-md-12">
                                <input type="text" class="form-control" placeholder="标题" />
                            </div>
                            <div class="col-md-12">
                                <textarea class="form-control cont" placeholder="留言内容"></textarea>
                            </div>
                            <div class="col-md-7 ">
                                <input type="submit" value="提交" class="form-control">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </section>
    <!-- footer -->
    <section id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>Copyright&nbsp;©&nbsp;2012-2015&nbsp;www.maiziedu.com &nbsp;蜀ICP备13014270号-4</p>
                </div>
            </div>
        </div>
    </section>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="./js/jquery.singlePageNav.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script>
        // 导航跳转效果插件
        $(function() {
            $('.nav').singlePageNav({
                offset: 70
            });
            // 小屏幕导航点击关闭菜单
            $('.navbar-collapse a').click(function() {
                $('.navbar-collapse').collapse('hide');
            });
            new WOW().init();
        })
    </script>
</body>

</html>